<template>
    <div style="background-color: #fff;margin: 8px;padding: 20px;height: 100%;">
        <div>
            <h1 class="title">设备 - {{ deviceInfo?.name }}</h1>
        </div>
        <div>
            <el-row :gutter="20" style="height: 100%;">
                <el-col :span="8" style="height: 100%;">
                    <el-card style="height: 100%;" shadow="never">
                        <div>
                            <h1 class="title">配置</h1>
                        </div>
                        <div>
                            <el-form label-position="top">
                                <el-form-item label="设备名称">
                                    <el-input placeholder="请输入设备名称。" v-model="deviceInfo.name" />
                                </el-form-item>
                                <el-form-item label="设备介绍">
                                    <el-input placeholder="请输入设备介绍。" v-model="deviceInfo.introduction" />
                                </el-form-item>
                                <el-form-item label="设备Id">
                                    <el-input placeholder="请输入设备device_id。" v-model="deviceInfo.device_id" disabled/>
                                </el-form-item>
                                <el-form-item label="设备关联角色智能体">
                                    <el-select placeholder="设备关联角色智能体" v-model="deviceInfo.role_agent_id">
                                        <el-option :label="ra?.name" :value="ra?.id" v-for="ra in roleAgentList" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="设备所在地">
                                    <el-input placeholder="请输入设备所在地。" v-model="deviceInfo.location" disabled/>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-button style="width: 100%;" type="primary" @click="updateDevice">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="16" style="height: 100%;">
                    
                    <div>
                            <!-- <el-card shadow="never"> -->
                                <h1 class="title">记忆摘要</h1>
                                <p style="background-color: #f3f4f5;padding:8px 16px;color:#999">{{ deviceInfo?.memory||"暂无记忆" }}
                                </p>
                            <!-- </el-card> -->
                        </div>
                    <!-- <el-card style="height: 100%;" shadow="never"> -->
                        <div>
                            <h1 class="title">对话历史记录</h1>
                        </div>
                        <!-- {{ generatedText }} -->
                        <div style="max-height:350px;padding:10px;overflow: auto;">
                            <div style="max-height:350px ;">
                                <!-- <el-card shadow="never" style="overflow: auto;"> -->
                                    <div v-for="m in deviceInfo?.history" style="margin:12px 4px">
                                        <div style="background-color: #409EFF;color: #fff; text-align: right;justify-self:right"
                                            v-if="m.role == 'user'">
                                            <p
                                                style="text-align: right;padding:8px 8px;margin: 2px;border-radius: 8px;width: fit-content;">
                                                {{ m.content }}
                                            </p>
                                        </div>

                                        <div style="background-color: #f4f5f6;text-align: left;justify-self:left"
                                            v-if="m.role == 'assistant'">
                                            <p
                                                style="text-align: left;padding:8px 8px;margin: 2px;border-radius: 8px;width: fit-content;">
                                                {{ m.content }}
                                            </p>
                                        </div>

                                    </div>
                                <!-- </el-card> -->
                            </div>
                        </div>
                    <!-- </el-card> -->
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script>
import { POST, streamPOST } from '../../util/axios.js'
import axios from 'axios';
export default {
    data() {
        return {
            id: 0,
            generatedText: "",
            inputDisabled: false,
            form: {
                fileList: []
            },
            deviceInfo: { id: "", character_id: "", location: "", name: "", introduction: "", device_id: "" },
            imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL,
            history: [],
            VITE_UPLOAD_API_BASE_URL: import.meta.env.VITE_UPLOAD_API_BASE_URL,
            roleAgentList: []
        }
    },
    methods: {
        async getDeviceInfo() {

            let rs = await POST("/deviceBank/getDeviceInfo", "POST", { id: this.id }, false)
            console.log("rs:>>:", rs)
            this.deviceInfo = rs.data

        },
        async updateDevice() {

            let rs = await POST("/deviceBank/updateDevice", "POST", this.deviceInfo, true)
            console.log("rs:>>:", rs)
            this.getDeviceInfo()

        },
        async getRoleAgentList() {
            let rs = await POST("/roleAgent/getRoleAgentList", "POST", {}, false)
            console.log("rs:>>:", rs)
            this.roleAgentList = rs.data
        },

    },
    mounted() {
        this.id = this.$route.params.id || 0
        console.log(this.id)
        this.getDeviceInfo()
        this.getRoleAgentList()
    }
}
</script>
<style>
.el-card__body {
    height: 100% !important;
}
</style>